<template>
    <div class="dh_xgj_manage">

        <div class="d_x_m-list">

            <div class="d_x_m-l-add">

                <form class="dxm-la-form">
                    <div class="dxm-la-f-input"><span class="ws4">用 户 名</span><input type="text" placeholder="注册用户名"  v-model="forminline.username"></div>
                    <div class="dxm-la-f-input"><span>用户密码</span><input type="password" placeholder="注册登录密码" v-model="forminline.password" autocomplete="off"></div>
                    <div class="dxm-la-f-input"><span>真实姓名</span><input type="text" placeholder="请输入您真实姓名" v-model="forminline.realname"></div>
                    <div class="dxm-la-f-input"><span class="ws4">手 机 号</span><input type="text" placeholder="注册的手机号" v-model="forminline.phone"></div>
                    <div class="d_x_m-l-add-btn"><el-button @click="addstaff">添加</el-button></div>
                </form>

            </div>

            <table class="d_x_m-l-table">
                <tr>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>姓名</th>
                    <th>手机</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,key) in hrtable" :key="key">
                    <td>{{item.username}}</td>
                    <td>{{item.password}}</td>
                    <td>{{item.realname}}</td>
                    <td>{{item.phone}}</td>
                    <td class="d_x_m-l-t-btn">

                        <el-button @click="amend(key,item.id, item.username, item.password, item.realname, item.phone)">修改</el-button>

                        <el-dialog title="修改员工信息" :visible.sync="dialogFormVisible" center :append-to-body='true' :lock-scroll="false" top="20vh" width="450px">
								
                            <p class="dxm-ltb-text tc red">*灰色是原信息，填好修改信息后点击确定，信息自动更新</p>

                            <div class="dxm-ltb-message mt20 df" v-for="(item,key) in input" :key="key">
                                <span :class="item.class">{{item.name}}</span>
                                <el-input class="dxm-ltbm-price" v-model="item.value" max="220px" :placeholder="item.text" clearable></el-input>
                            </div>

                            <div class="dxm-ltb-confirm mt20 tc">
                                <el-button type="primary" @click="refer" class="dxm-ltb-c-btn wh">确定</el-button>
                            </div>
                            
                        </el-dialog>
                </td>
                </tr>
            </table>
        </div>

        <div class="d_j_mber-block mt20">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                layout="prev, pager, next, jumper"
                :page-count="pagecount"
                >
            </el-pagination>
        </div>

    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            // 缓存中的账号密码
            login:{},
            // 添加员工的动态绑定信息
            forminline: {
                username: '',
                password: '',
                realname: '',
                phone: ''
            },
            // 弹出层的内容数组，样式默认值等
            input:[
                {id: 0,name: "用 户 名",value: "",text:'',class:"ws4"},
                {id: 1,name: "用户密码",value: "",text:''},
                {id: 2,name: "真实姓名",value: "",text:''},
                {id: 3,name: "手机号码",value: "",text:'',key: ''},
                // {id: 4,name: "",value: "",text:''},
            ],
            options: [{
                value: '1',
                label: '超级管理员'
            }, {
                value: '2',
                label: '普通用户'
            }],
            value: '2',	
            //列表数组
            hrtable:[],
            dialogFormVisible: false,           //弹出层的状态
            currentPage: 1,						//分页的默认页数
            pagecount: 0,						//总页数
        };
    },
    // 过滤器
    filters:{
        // 数组过滤成同意拒绝（函数带的形参需要对应装换值的关键字，否则未定义）
        changestate(id){
            if(id == 1){
                id = "超级管理员"
            }else{
                id = "普通用户"
            }
            return id
        }
    },
    // 组件注册
    computed: {},
    watch: {},
    // 方法管理
    methods: {
        // form表单自带函数
        onSubmit() {
            // console.log('submit!');
        },

        // 员工数据
        requestdata(){
            const that = this;
            let axios = require('axios');
            let data = {name:that.login.uname,password:that.login.pwd,page: that.currentPage}
            let updata = JSON.stringify(data)
            // console.log(data,updata)
            axios({
                method: 'post',
                url: '/api/api/dh_school/b_getstaff.php',
                headers: { "Content-Type": "appliction/JSON" },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                if(that.pagecount === 0){
                    that.pagecount = resp.data.code
                }
                that.hrtable = resp.data.data
            })
            .catch( err=> { 
                // console.log(err)
            })
        },

        // 添加员工
        addstaff(){
            // console.log(this.forminline)
            const that = this;
            let axios = require('axios')
            let data = {
                name: that.login.uname,
                password: that.login.pwd,
                username: that.forminline.username,
                user_password: that.forminline.password,
                realname: that.forminline.realname,
                phone: that.forminline.phone
            }
            let updata = JSON.stringify(data)
            // console.log(data,updata)
            if(that.forminline.username!=='' && that.forminline.password!=='' && that.forminline.realname!=='' && that.forminline.phone!==''){
                axios({
                    method: 'post',
                    url: '/api/api/dh_school/b_adduser.php',
                    headers: { "Content-Type": "appliction/JSON" },
                    data: updata
                })
                .then( resp=> {
                    // console.log(resp)
                    that.hrtable.push(JSON.parse(JSON.stringify(that.forminline)))
                })
                .catch( err=> {
                    // console.log(err)
                })
            }else{
                if(that.forminline.username === ''){
                    this.$message.error('用户名不能为空');
                }else if(that.forminline.password === ''){
                    this.$message.error('用户密码不能为空');
                }else if(that.forminline.realname === ''){
                    this.$message.error('真实姓名不能为空');
                }else{
                    this.$message.error('手机号不能为空');
                }
            }
            
        },

        // 弹出层以及修改员工信息
        amend(key,id,username,password,realname,phone){
            const that = this;
            // 用判断两次是否点击的同一个员工，未提交则之前输入的信息保留，方便提交
            if(that.input[3].id !== id){
                for(var o=0;o<that.input.length;o++){
                    that.input[o].value = ''
                }
                that.input[0].text = username;
                that.input[1].text = password;
                that.input[2].text = realname;
                that.input[3].text = phone;
                that.input[3].key = key;
                that.input[3].id = id;
            }
            this.dialogFormVisible = true
        },
        // 修改员工信息
        refer(){
            const that = this;
            let axios = require('axios')
            let data = {
                name: that.login.uname,
                password: that.login.pwd,
                username: that.input[0].value=== ''? that.input[0].text : that.input[0].value,
                user_password: that.input[1].value=== ''? that.input[1].text : that.input[1].value,
                realname: that.input[2].value=== ''? that.input[2].text : that.input[2].value,
                phone: that.input[3].value=== ''? that.input[3].text : that.input[3].value,
                id: that.input[3].id
            }
            that.dialogFormVisible = false;
            let updata = JSON.stringify(data)
            // console.log(data,updata)
            // 确认的弹窗
            this.$confirm('确认后用户信息将彻底修改，取消则放弃此次编辑', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: 'true'
            })
            .then(() => {
                // 修改员工信息的请求
                axios({
                    method: 'post',
                    url: '/api/api/dh_school/b_alteruser.php',
                    headers: { "Content-Type": "appliction/JSON" },
                    data: updata
                })
                .then( resp=> {
                    // 对
                    for(var o=0;o<that.input.length;o++){
                        that.input[o].value = ''
                    }
                    let key = that.input[3].key;
                    that.hrtable[key].username = data.username;
                    that.hrtable[key].password = data.user_password;
                    that.hrtable[key].realname = data.realname;
                    that.hrtable[key].phone = data.phone;
                    // console.log(that.hrtable)
                })
                .catch( err=> {
                    // console.log(err)
                })
            this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });          
            });
        },

        //分页的跳页函数
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.requestdata()
        },
    },
    // 全部的生命周期函数
    created() {},
    mounted() {
        const that = this;
        that.login = JSON.parse(sessionStorage.getItem("dh_xgj_login"))
        that.requestdata()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
}
</script>
<style scoped>
    input{
        width: calc(100% - 90px);
        height: 100%;
        border: none;
        padding: 3px 5px;
        border-radius: 8px;
    }
    .el-button{
        padding: 5px 10px;
        border: none;
    }
    /* //@import url(); 引入公共css类 */
    .dh_xgj_manage{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    /* .d_x_m-list{
        overflow: hidden;
        border-radius: 5px;
        border: 1px solid gray;
        background-color: white;
    } */
    /* 员工添加的信息 */
    .d_x_m-l-add{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        font-size: 16px;
    }
    .dxm-la-form{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .dxm-la-f-input{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 33.3333333%;
        height: 30px;
        margin: 15px 0;
        box-sizing: border-box;
    }
    .dxm-la-f-input>span{
        width: 90px;
    }
    .d_x_m-l-add-btn{
        /* margin-left: auto; */
        width: 100px;
        height: 30px;
        margin: 15px 0 15px auto;
    }
    .d_x_m-l-add-btn>button.el-button{
        width: 100%;
        height: 30px;
        font-size: 16px;
        color: white;
        background-color: #00aeff;
    }

    /* 列表样式 */
    .d_x_m-l-table{
        width: 100%;
        font-size: 15px;
        border-radius: 5px;
        background-color: white;
        box-shadow: 1px 1px 5px rgb(77, 77, 77);
        border-collapse:collapse;
    }
    .d_x_m-l-table>tr>th,.d_x_m-l-table>tr>td{
        height: 50px;
        min-height: 50px;
        padding: 0 10px;
    }
    .d_x_m-l-table>tr:nth-child(even){
        color: white;
        background-color: rgb(168, 168, 168);
    }
    /* 修改按钮的样式 */
    .d_x_m-l-t-btn>.el-button{
        width: 50px;
        height: 30px;
        font-size: 16px;
        color: white;
        background-color: #00aeff;
    }
    /* 修改员工信息的弹窗样式 */
    .dxm-ltb-message>span{
        white-space: nowrap;
        margin: auto 10px auto 0;
    }
    .dxm-ltb-message>.el-select{
        width: 100%;
    }
    .dxm-ltb-c-btn{
        width: 60px;
        height: 40px;
    }
    /* 分页 */
    /* .d_j_mber-block{
        margin-top: 
    } */
</style>